<template>
  <div ref="dateSelectRef" class="date-select">
    <div class="date-select-title">开始时间：</div>
    <a-date-picker
      v-model="value[0]"
      class="start-picker w-218px"
      format="YYYY-MM-DD  HH:mm:ss"
      value-format="X"
      placement="right"
      type="datetime"
      show-time
      :teleported="false"
      :allow-clear="false"
      :disabled-date="DisabledDate"
      placeholder="请选择开始时间"
      @change="handleStartChange">
      <template #suffix-icon>
        <div class="flex content-center items-center">
          <img :src="TimeSvg" alt="" />
        </div>
      </template>
    </a-date-picker>
    <div class="date-select-title">结束时间：</div>
    <a-date-picker
      v-model="value[1]"
      class="end-picker w-218px"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="X"
      placement="right"
      type="datetime"
      show-time
      :allow-clear="false"
      :teleported="false"
      :disabled-date="DisabledDate"
      placeholder="请选择结束时间"
      @change="handleEndChange">
      <template #suffix-icon>
        <div class="flex content-center items-center">
          <img :src="TimeSvg" alt="" />
        </div>
      </template>
    </a-date-picker>
    <div class="tips">{{ tips }}</div>
    <a-button
      class="submit-btn"
      type="primary"
      :disabled="disabled"
      @click="emit('submit')"
      >确定</a-button
    >
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { computed, ref } from 'vue'
import TimeSvg from './icons/time.svg'
import type { DatePickValue } from './types'
import { getStrBySecond } from './utils'

const props = defineProps<{
  modelValue: DatePickValue
  dateRange: number
}>()

const emit = defineEmits<{
  'clear-last-active': []
  'update:modelValue': [value: DatePickValue]
  submit: []
}>()

const dateSelectRef = ref<HTMLDivElement>()

const value = computed({
  get: () => props.modelValue,
  // eslint-disable-next-line vue/require-explicit-emits
  set: (val) => emit('update:modelValue', val)
})

const tips = computed(() => `时间范围最大为 ${getStrBySecond(props.dateRange)}`)

const disabled = computed(() => props.modelValue.filter(Boolean).length < 2)
const start = computed(() => value.value[0])
const end = computed(() => value.value[1])

function DisabledDate(date: Date) {
  const now = dayjs()
  return (
    dayjs(date).isBefore(now.subtract(1, 'month')) ||
    dayjs(date).isAfter(dayjs().startOf('day').endOf('day'))
  )
}

function handleStartChange(date: number) {
  // // 点击清除
  // if (!date) {
  //   value.value[0] = dayjs.unix(end.value!).subtract(props.dateRange, 'second').unix()
  //   return
  // }
  const startD = dayjs.unix(date)
  const max = startD.add(props.dateRange, 'second').unix()

  if (
    !end.value ||
    (end.value && Number(end.value) > max) ||
    (end.value && Number(end.value) <= startD.unix())
  ) {
    value.value[1] = max.toString()
  }
  emit('clear-last-active')
}

function handleEndChange(date: number) {
  // // 点击清除
  // if (!date) {
  //   value.value[1] = dayjs.unix(start.value!).add(props.dateRange, 'second').unix()
  //   return
  // }
  const endD = dayjs.unix(date)
  const min = endD.subtract(props.dateRange, 'second').unix()
  if (
    !start.value ||
    (start.value && Number(start.value) < min) ||
    (start.value && Number(start.value) >= endD.unix())
  ) {
    value.value[0] = min.toString()
  }
  emit('clear-last-active')
}
</script>
